<template>
  <div
    class="node-attr-container"
    :style="{
      color: themeStyle[theme].textColor1
    }"
  >
    <!-- 画布属性标题 -->
    <div
      class="title"
      :style="{
        borderBottom: `1px solid ${themeStyle[theme].borderColor1}`
      }"
    >
      <span style="color: #0087dc">{{ '节点属性' }}</span>
      <div class="icon" :class="Nodedata.lock ? 'lockIcon' : ''">
        <template v-if="Nodedata.lock">
          <LockOutlined @click="switchLock" />
        </template>
        <template v-else>
          <UnlockOutlined @click="switchLock" />
        </template>
      </div>
    </div>

    <div class="attr-content">
      <SizeTransition>
        <Form
          :model="Nodedata"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          :label-align="'left'"
          :disabled="Nodedata.lock"
          autocomplete="off"
        >
          <!-- X,Y,长,宽,旋转,圆角-->
          <FormItem :wrapper-col="{ span: 20 }">
            <div class="basic-info-item">
              <Input v-model:value="Nodedata.x" size="small" type="number" @change="changePosition">
                <template #prefix>
                  <span class="basic-info-item-prefix">{{ 'X' }}</span>
                </template>
              </Input>
              <Input v-model:value="Nodedata.y" size="small" type="number" @change="changePosition">
                <template #prefix>
                  <span class="basic-info-item-prefix">Y</span>
                </template>
              </Input>
            </div>
          </FormItem>
          <FormItem :wrapper-col="{ span: 20 }">
            <div class="basic-info-item">
              <Input
                v-model:value="Nodedata.width"
                size="small"
                type="number"
                @change="changeSize('width')"
              >
                <template #prefix>
                  <span class="basic-info-item-prefix">W</span>
                </template>
              </Input>
              <Input
                v-model:value="Nodedata.height"
                size="small"
                type="number"
                @change="changeSize('height')"
              >
                <template #prefix>
                  <span class="basic-info-item-prefix">H</span>
                </template>
              </Input>
              <div
                class="association-lock"
                :class="changeAssociationLock.lock ? 'association-lock-active' : ''"
                @click="computeAssociation"
              >
                <AliyunOutlined />
              </div>
            </div>
          </FormItem>
          <FormItem :wrapper-col="{ span: 20 }">
            <div class="basic-info-item">
              <Input
                v-model:value="Nodedata.rotate"
                type="number"
                size="small"
                @change="handleChange"
              >
                <template #prefix>
                  <span class="basic-info-item-prefix">R</span>
                </template>
              </Input>
              <Input
                v-model:value="Nodedata.style.borderRadius"
                type="number"
                size="small"
                @change="handleChange"
              >
                <template #prefix>
                  <span class="basic-info-item-prefix">BR</span>
                </template>
              </Input>
            </div>
          </FormItem>

          <div
            class="attr-tab-title"
            :style="{
              backgroundColor: themeStyle[theme].backgroundColor3,
              color: themeStyle[theme].textColor2
            }"
          >
            <div
              class="attr-tab-title-item"
              :style="{ color: dataType === 'simData' ? '#0087dc' : '' }"
              @click="dataType = 'simData'"
            >
              节点数据
            </div>
            <div
              class="attr-tab-title-item"
              :style="{ color: dataType === 'style' ? '#0087dc' : '' }"
              @click="dataType = 'style'"
            >
              节点样式
            </div>
          </div>

          <div class="attr-tab-content">
            <template v-if="dataType === 'style'">
              <!-- 节点名字 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '节点名字' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input v-model:value="Nodedata.name" size="small" @change="changeNodeName" />
                </div>
              </FormItem>
              <!-- 节点层级 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '节点层级' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input
                    v-model:value="Nodedata.zIndex"
                    type="number"
                    size="small"
                    @change="handleChange"
                  />
                </div>
              </FormItem>
              <!-- 边框尺寸 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '边框尺寸' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input
                    v-model:value="Nodedata.style.borderWidth"
                    type="number"
                    size="small"
                    :suffix="'px'"
                    @change="handleChange"
                  />
                </div>
              </FormItem>
              <!-- 边框样式 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '边框样式' }}</span
                  >
                </template>
                <Select
                  v-model:value="Nodedata.style.borderType"
                  size="small"
                  @change="handleChange"
                >
                  <SelectOption value="solid">
                    <span style="color: #666; font-size: 14px">实线</span>
                  </SelectOption>
                  <SelectOption value="dashed">
                    <span style="color: #666; font-size: 14px">虚线</span>
                  </SelectOption>
                  <SelectOption value="dotted">
                    <span style="color: #666; font-size: 14px">点状</span>
                  </SelectOption>
                </Select>
              </FormItem>
              <!-- 边框颜色 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '边框颜色' }}</span
                  >
                </template>
                <div style="display: flex">
                  <ColorSelect
                    v-model:color="Nodedata.style.borderColor"
                    :disable="Nodedata.lock"
                    :height="24"
                    @change="handleChange"
                  />
                </div>
              </FormItem>
              <!-- 背景填充 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '背景填充' }}</span
                  >
                </template>
                <div style="display: flex">
                  <ColorSelect
                    v-model:color="Nodedata.style.backgroundColor"
                    :disable="Nodedata.lock"
                    :height="24"
                    @change="handleChange"
                  />
                </div>
              </FormItem>
              <!-- icon -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '节点图标' }}</span
                  >
                </template>
                <Select v-model:value="Nodedata.style.icon" size="small" @change="handleChange">
                  <template v-for="(item, index) in svgListOptions" :key="index">
                    <SelectOption :value="item.id">
                      <span style="color: #666; font-size: 14px">{{ item.name }}</span>
                    </SelectOption>
                  </template>
                </Select>
              </FormItem>
              <!-- 图标尺寸 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '图标尺寸' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input
                    v-model:value="Nodedata.style.iconSize"
                    type="number"
                    size="small"
                    :suffix="'em'"
                    @change="handleChange"
                  />
                </div>
              </FormItem>
              <!-- 上连接桩 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '上连接桩' }}</span
                  >
                </template>
                <Select
                  v-model:value="Nodedata.style.portTop.type"
                  size="small"
                  @change="handlePortChange"
                >
                  <SelectOption value="input">
                    <span style="color: #666; font-size: 14px">输入</span>
                  </SelectOption>
                  <SelectOption value="output">
                    <span style="color: #666; font-size: 14px">输出</span>
                  </SelectOption>
                  <SelectOption value="twoway">
                    <span style="color: #666; font-size: 14px">双向</span>
                  </SelectOption>
                  <SelectOption value="none">
                    <span style="color: #666; font-size: 14px">置空</span>
                  </SelectOption>
                </Select>
              </FormItem>
              <!-- 下连接桩 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '下连接桩' }}</span
                  >
                </template>
                <Select
                  v-model:value="Nodedata.style.portBottom.type"
                  size="small"
                  @change="handlePortChange"
                >
                  <SelectOption value="input">
                    <span style="color: #666; font-size: 14px">输入</span>
                  </SelectOption>
                  <SelectOption value="output">
                    <span style="color: #666; font-size: 14px">输出</span>
                  </SelectOption>
                  <SelectOption value="twoway">
                    <span style="color: #666; font-size: 14px">双向</span>
                  </SelectOption>
                  <SelectOption value="none">
                    <span style="color: #666; font-size: 14px">置空</span>
                  </SelectOption>
                </Select>
              </FormItem>
              <!-- 左连接桩 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '左连接桩' }}</span
                  >
                </template>
                <Select
                  v-model:value="Nodedata.style.portLeft.type"
                  size="small"
                  @change="handlePortChange"
                >
                  <SelectOption value="input">
                    <span style="color: #666; font-size: 14px">输入</span>
                  </SelectOption>
                  <SelectOption value="output">
                    <span style="color: #666; font-size: 14px">输出</span>
                  </SelectOption>
                  <SelectOption value="twoway">
                    <span style="color: #666; font-size: 14px">双向</span>
                  </SelectOption>
                  <SelectOption value="none">
                    <span style="color: #666; font-size: 14px">置空</span>
                  </SelectOption>
                </Select>
              </FormItem>
              <!-- 右连接桩 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '右连接桩' }}</span
                  >
                </template>
                <Select
                  v-model:value="Nodedata.style.portRight.type"
                  size="small"
                  @change="handlePortChange"
                >
                  <SelectOption value="input">
                    <span style="color: #666; font-size: 14px">输入</span>
                  </SelectOption>
                  <SelectOption value="output">
                    <span style="color: #666; font-size: 14px">输出</span>
                  </SelectOption>
                  <SelectOption value="twoway">
                    <span style="color: #666; font-size: 14px">双向</span>
                  </SelectOption>
                  <SelectOption value="none">
                    <span style="color: #666; font-size: 14px">置空</span>
                  </SelectOption>
                </Select>
              </FormItem>
            </template>

            <template v-if="dataType === 'simData'">
              <!-- 发生器 -->
              <template v-if="Nodedata.simData?.produce">
                <!-- 发生数量 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '生产数量' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.produce.quantity"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 发生间隔 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '生产间隔' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <FixedRandom v-model:interval="Nodedata.simData.produce.interval" />
                    <!-- <Input
                      v-model:value="Nodedata.simData.produce.interval"
                      type="number"
                      size="small"
                    /> -->
                  </div>
                </FormItem>
                <!-- 自我循环 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '自我循环' }}</span
                    >
                  </template>
                  <Switch
                    v-model:checked="Nodedata.simData.produce.selfCirculation"
                    size="small"
                    checked-children="开"
                    un-checked-children="关"
                    @change="handleChange"
                  />
                </FormItem>
                <!-- 产品样式 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '产品样式' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Popover :placement="'bottomRight'" :trigger="'click'">
                      <template #content> <CustomProductStyle /> </template>
                      <div class="custom-product-btn" v-if="!Nodedata.lock">产品编辑</div>
                    </Popover>
                    <div
                      class="custom-product-preview"
                      :style="{ backgroundColor: Nodedata.simData.product.backgroundColor }"
                    ></div>
                  </div>
                </FormItem>
              </template>

              <!-- 加工站 -->
              <template v-if="Nodedata.simData?.process">
                <!-- 加工时间 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '加工时间' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <FixedRandom v-model:interval="Nodedata.simData.process.processTime" />
                  </div>
                </FormItem>
                <!-- 不良品率 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '不良品率' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.process.defectiveRate"
                      type="number"
                      size="small"
                    >
                      <template #suffix>
                        <span style="color: #7e7e7e">0-1</span>
                      </template>
                    </Input>
                  </div>
                </FormItem>
                <!-- 故障概率 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '故障概率' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.process.failureRate"
                      type="number"
                      size="small"
                    >
                      <template #suffix>
                        <span style="color: #7e7e7e">0-1</span>
                      </template>
                    </Input>
                  </div>
                </FormItem>
                <!-- 是否开启上下料 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '上下料点' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Switch
                      v-model:checked="Nodedata.simData.process.enablePorts"
                      size="small"
                      checked-children="开"
                      un-checked-children="关"
                      @change="handleChange"
                    />
                  </div>
                </FormItem>
                <!-- 上料点 -->
                <FormItem v-if="Nodedata.simData.process.enablePorts">
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '上料点' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.process.loaderPoints[0]"
                      type="number"
                      size="small"
                      style="width: 47%"
                    >
                      <template #suffix>
                        <span style="color: #7e7e7e">0-1</span>
                      </template>
                    </Input>
                    <Input
                      v-model:value="Nodedata.simData.process.loaderPoints[1]"
                      type="number"
                      size="small"
                      style="width: 47%"
                    >
                      <template #suffix>
                        <span style="color: #7e7e7e">0-1</span>
                      </template>
                    </Input>
                  </div>
                </FormItem>
                <!-- 下料点 -->
                <FormItem v-if="Nodedata.simData.process.enablePorts">
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '下料点' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.process.cuttingPoints[0]"
                      type="number"
                      size="small"
                      style="width: 47%"
                    >
                      <template #suffix>
                        <span style="color: #7e7e7e">0-1</span>
                      </template>
                    </Input>
                    <Input
                      v-model:value="Nodedata.simData.process.cuttingPoints[1]"
                      type="number"
                      size="small"
                      style="width: 47%"
                    >
                      <template #suffix>
                        <span style="color: #7e7e7e">0-1</span>
                      </template>
                    </Input>
                  </div>
                </FormItem>
                <!-- 人工协助 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '人工协助' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Switch
                      v-model:checked="Nodedata.simData.process.personAssist"
                      size="small"
                      checked-children="开"
                      un-checked-children="关"
                      @change="handleChange"
                    />
                  </div>
                </FormItem>
              </template>

              <!-- 批处理 -->
              <template v-if="Nodedata.simData?.batchProcess">
                <!-- 批处理数 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '批处理数' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.batchProcess.batchQuantity"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 加工时间 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '加工时间' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.batchProcess.processTime"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 动画方向 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '动画方向' }}</span
                    >
                  </template>
                  <Select
                    v-model:value="Nodedata.simData.batchProcess.animationDirection"
                    size="small"
                  >
                    <SelectOption value="left">
                      <span style="color: #666; font-size: 14px">➡</span>
                    </SelectOption>
                    <SelectOption value="right">
                      <span style="color: #666; font-size: 14px">⬅</span>
                    </SelectOption>
                    <SelectOption value="up">
                      <span style="color: #666; font-size: 14px">⬇</span>
                    </SelectOption>
                    <SelectOption value="down">
                      <span style="color: #666; font-size: 14px">⬆</span>
                    </SelectOption>
                  </Select>
                </FormItem>
              </template>

              <!-- 装配站 -->
              <template v-if="Nodedata.simData?.assemble">
                <Assemble v-if="Nodedata.simData?.assemble" />
              </template>

              <!-- 拆卸站 -->
              <template v-if="Nodedata.simData?.disassemble">
                <Disassemble v-if="Nodedata.simData?.disassemble" />
              </template>

              <!-- 缓冲区 -->
              <template v-if="Nodedata.simData?.buffer">
                <!-- 储存容量 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '储存容量' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.buffer.capacity"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
              </template>

              <!-- AGV -->
              <template v-if="Nodedata.simData?.agv">
                <!-- 移动速度 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '移动速度' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input v-model:value="Nodedata.simData.agv.speed" type="number" size="small" />
                  </div>
                </FormItem>
                <!-- 旋转速度 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '旋转速度' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.agv.rotateSpeed"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 装载容量 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '装载容量' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.agv.capacity"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 装载时间 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '装载时间' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.agv.loadTime"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 卸载时间 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '卸载时间' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.agv.unloadTime"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 启用交通网 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '启用交通' }}</span
                    >
                  </template>
                  <Switch
                    v-model:checked="Nodedata.simData.agv.enableTraffic"
                    size="small"
                    checked-children="开"
                    un-checked-children="关"
                    @change="handleChange"
                  />
                </FormItem>
              </template>

              <!-- 工人池 -->
              <template v-if="Nodedata.simData?.workerPool">
                <!-- 工人数量 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '工人数量' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.workerPool.workerNum"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 工人速度 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '工人速度' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.workerPool.workerSpeed"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>
                <!-- 维修时间 -->
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '维修时间' }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="Nodedata.simData.workerPool.maintenanceTime"
                      type="number"
                      size="small"
                    />
                  </div>
                </FormItem>

                <!-- 关联设备 -->
                <div
                  class="secondary-title"
                  :style="{
                    backgroundColor: themeStyle[theme].backgroundColor3
                  }"
                >
                  <span>关联设备</span>
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      gap: 10px;
                    "
                  >
                    <ExpandOutlined @click="assignmentAssociatedDevices(0)" />
                    <SnippetsOutlined @click="assignmentAssociatedDevices(1)" />
                    <DiffOutlined @click="assignmentAssociatedDevices(2)" />
                  </div>
                </div>
                <div
                  class="cell-list-content"
                  :style="{ color: themeStyle[theme].textColor1 + 'aa' }"
                >
                  <template
                    v-for="(item, index) in Nodedata.simData.workerPool.associatedDevices"
                    :key="index"
                  >
                    <div class="cell-list-item">
                      <span>{{ item.name }}</span>
                      <span class="item-id">{{ item.id }}</span>
                    </div>
                  </template>
                </div>
              </template>
            </template>
          </div>
        </Form>
      </SizeTransition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import {
  LockOutlined,
  UnlockOutlined,
  AliyunOutlined,
  ExpandOutlined,
  SnippetsOutlined,
  DiffOutlined
} from '@ant-design/icons-vue'
import SizeTransition from '@renderer/components/sizeTransition/SizeTransition.vue'
import { Form, FormItem, Input, Select, SelectOption, Popover, Switch } from 'ant-design-vue'
import ColorSelect from '@renderer/components/colorSelect/ColorSelect.vue'
import Assemble from './Assemble.vue'
import Disassemble from './Disassemble.vue'
import CustomProductStyle from './CustomProductStyle.vue'
import FixedRandom from '@renderer/components/fixedRandom/FixedRandom.vue'

import { Nodedata, handleChange } from './nodeProTemHook'

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: false
  }
})
Nodedata.value = props.data

watch(
  () => props.data,
  (val) => {
    if (props.data.id !== Nodedata.value.id) {
      handleChange()
    }
    Nodedata.value = props.data
  },
  {
    deep: true
  }
)

onMounted(() => {
  window.electron.ipcRenderer.on('canvasData', (e, mainData): void => {
    const { methodName, result } = mainData
    if (methodName === 'moveNode' && result.id === Nodedata.value.id) {
      Nodedata.value.x = result.x
      Nodedata.value.y = result.y
    }
    if (methodName === 'changeNodeSize' && result.id === Nodedata.value.id) {
      Nodedata.value.width = result.width
      Nodedata.value.height = result.height
    }
  })
})
onUnmounted(() => {
  handleChange()
})

//处理连接桩变化
const handlePortChange = async (): Promise<void> => {
  handleChange()
  await window.api.handleCanvasData('changeNodePort', 'property', true, [Nodedata.value.id])
  const nodeData = window.api.handleCanvasData('getNodes', 'property', false, [
    'id',
    Nodedata.value.id
  ])
  const node = nodeData[0]
  Nodedata.value = node
}

//位置发生改变
const changePosition = (): void => {
  window.api.handleCanvasData('moveNode', 'property', true, [
    Nodedata.value.id,
    Number(Nodedata.value.x),
    Number(Nodedata.value.y)
  ])
}
//宽高比是否锁定
const changeAssociationLock = ref({
  lock: false,
  ratio: 1
})
const computeAssociation = (): void => {
  changeAssociationLock.value.lock = !changeAssociationLock.value.lock
  if (changeAssociationLock.value.lock) {
    changeAssociationLock.value.ratio = Nodedata.value.width / Nodedata.value.height
  }
}
//大小发生改变
const changeSize = (type: 'width' | 'height'): void => {
  if (changeAssociationLock.value.lock) {
    if (type === 'width') {
      Nodedata.value.height = Nodedata.value.width / changeAssociationLock.value.ratio
    }
    if (type === 'height') {
      Nodedata.value.width = Nodedata.value.height * changeAssociationLock.value.ratio
    }
  }
  window.api.handleCanvasData('changeNodeSize', 'property', true, [
    Nodedata.value.id,
    Number(Nodedata.value.width),
    Number(Nodedata.value.height)
  ])
}

const switchLock = (): void => {
  Nodedata.value.lock = !Nodedata.value.lock
  handleChange()
}

//现在显示的数据类型
const dataType = ref<'simData' | 'style'>('simData')

//svg列表选项
const svgListOptions = ref<{ id: string; name: string; svg: string }[]>([])
const getSvgList = async (): Promise<void> => {
  svgListOptions.value = await window.electron.ipcRenderer.invoke('nodeIcon', 'getSvgDataList', [])
}
getSvgList()

//给工人池的关联设备进行赋值
const assignmentAssociatedDevices = async (isAll: 0 | 1 | 2) => {
  if (isAll === 0) {
    const canvas = window.api.handleCanvasData('getCanvas', 'property', false, [])
    const nodes = canvas.nodes
    const devices = nodes
      .filter((item) => item.type === 'process')
      .map((item) => {
        return {
          id: item.id,
          name: item.name
        }
      })
    Nodedata.value.simData.workerPool.associatedDevices = devices
  } else if (isAll === 1) {
    //从粘贴板读取消息
    const clipboardData = await navigator.clipboard.readText()
    const devices = JSON.parse(clipboardData)
    Nodedata.value.simData.workerPool.associatedDevices = devices
  } else if (isAll === 2) {
    //从粘贴板读取消息
    const clipboardData = await navigator.clipboard.readText()
    const devices = JSON.parse(clipboardData)
    Nodedata.value.simData.workerPool.associatedDevices.push(...devices)
  }
}

//改变节点名字
const changeNodeName = (): void => {
  handleChange()
  //更新一下自己的资源栏
  window.electron.ipcRenderer.send('changeNodeNameToResource', {
    id: Nodedata.value.id,
    name: Nodedata.value.name
  })
}
</script>

<style scoped lang="scss">
.node-attr-container {
  width: 100%;
  height: 100%;
  font-size: $font-size-medium;

  .title {
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;

    .icon {
      margin-right: 10px;
      cursor: pointer;
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      color: #7e7e7e;
    }
    .lockIcon {
      background-color: $icon-active-bgColor;
      color: $icon-active-color;
    }
  }

  .attr-content {
    padding: 5px 3px 5px 6px;
    height: calc(100% - 60px);
    user-select: none;
    :deep(.ant-form-item) {
      margin-bottom: 0px;
    }

    :deep(.basic-info-item-prefix) {
      width: 16px;
      font-size: $font-size-small;
    }

    .basic-info-item {
      position: relative;
      display: flex;
      gap: 10px;
      :deep(.ant-input-affix-wrapper) {
        background-color: #f5f5f5;
        border-color: transparent;
        font-size: $font-size-small;
      }
      :deep(.ant-input-sm) {
        background-color: rgb(243 243 243 / 44%);
      }

      .association-lock {
        position: absolute;
        right: -25px;
        top: 1px;
        width: 22px;
        height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        cursor: pointer;
      }
      .association-lock-active {
        background-color: $icon-active-bgColor;
        color: $icon-active-color;
      }
    }

    .attr-tab-title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 25px;
      font-size: 13px;
      .attr-tab-title-item {
        cursor: pointer;
      }
    }

    .attr-tab-content {
      overflow-y: auto;
      padding: 5px 3px 5px 0px;
      font-size: $font-size-small;
      :deep(.ant-input-affix-wrapper) {
        border-radius: 0px;
      }
      :deep(.ant-form-item) {
        margin-bottom: 0px;
      }
      :deep(.ant-input-sm) {
        border-radius: 0px;
      }
      :deep(.ant-select-selector) {
        border-radius: 0px;
      }

      .content-item-label {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .custom-product-btn {
        border: 1px solid #cecece;
        color: #449bd1;
        padding: 0px 5px;
        cursor: pointer;
        margin-right: 10px;
      }
      .custom-product-preview {
        width: 24px;
        height: 24px;
        background-color: #7e7e7e;
      }
      .secondary-title {
        height: 24px;
        display: flex;
        justify-content: space-between;
        padding: 0px 5px;
        align-items: center;
      }
      .cell-list-content {
        font-size: $font-size-small;
        padding: 0px 5px;
        .cell-list-item {
          margin-top: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-id {
            width: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
          }
        }
      }
    }
  }
}
</style>
